/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/04/28
*@description
*@rule
 */
@import '../../../config/config.less';
@import '../../../mixins/close/index.less';

@css-prefix-notice: ~"@{css-prefix}notice";
@css-prefix-icon: ~"@{css-prefix}icon";

@notice-width: 335px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;

.@{css-prefix-notice} {
  width: @notice-width;
  margin-right: 24px;
  position: fixed;
  z-index: @zindex-notification;

  &-content-with-icon{
    margin-left: 51px;
  }
  &-with-desc&-with-icon &-title{
    margin-left: 51px;
  }

  &-notice {
    margin-bottom: @notice-margin-bottom;
    padding: @notice-padding;
    // border: 1px solid @border-color-split;
    border-radius: @border-radius-small;
    box-shadow: @shadow-base;
    background: #fff;
    line-height: 1;
    position: relative;
    overflow: hidden;

    &-close {
      position: absolute;
      right: 16px;
      top: 15px;
      color: #999;
      outline: none;

      i{
        .close-base(-3px);
      }
    }

    &-content-with-render{
      .@{css-prefix}-notice-desc{
        display: none;
      }
    }

    &-with-desc{
      .@{css-prefix-notice}-notice-close{
        top: 11px;
      }
    }
  }

  &-content-with-render-notitle{
    margin-left: 26px;
  }

  &-title {
    font-size: @font-size-base;
    line-height: @font-size-base + 3;  //fixed the bug that the bottom of some letters were hidden just like 'g'
    color: @title-color;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-with-desc &-title{
    font-weight: bold;
    margin-bottom: 8px;
  }

  &-desc {
    font-size: 12px;
    //color: @legend-color;
    color: @text-color;
    text-align: justify;
    line-height: 1.5;
    word-wrap: break-word;
  }
  &-with-desc&-with-icon &-desc{
    margin-left: 51px;
  }

  &-with-icon &-title{
    margin-left: 26px;
  }

  &-icon {
    position: absolute;
    left: 20px;
    margin-top: -1px;
    font-size: 16px;

    &-success {
      color: @success-color;
    }
    &-info {
      color: @primary-color;
    }
    &-warning {
      color: @warning-color;
    }
    &-error {
      color: @error-color;
    }
  }
  &-with-desc &-icon{
    font-size: 36px;
  }

  &-custom-content{
    &:after{
      content: "";
      display: block;
      width: 4px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }
  }
  &-with-normal{
    &:after{
      background: @primary-color;
    }
  }
  &-with-info{
    &:after{
      background: @primary-color;
    }
  }
  &-with-success{
    &:after{
      background: @success-color;
    }
  }
  &-with-warning{
    &:after{
      background: @warning-color;
    }
  }
  &-with-error{
    &:after{
      background: @error-color;
    }
  }
}
